<template>
	<!-- 高级认证 -->
	<view class="authentication-senior">
		<nav-bar :title="i18n.auth.seniorAuth" @_back="_back" />
		<view class="container">
			<view class="senior-list">
				<text>{{i18n.auth.country}}</text>
				<text class="white-text">{{info.country}}</text>
			</view>
			<view class="senior-list">
				<text>{{i18n.auth.name}}</text>
				<text class="white-text">{{info.name}}</text>
			</view>
			<view class="senior-list">
				<text>{{i18n.auth.id}}</text>
				<text class="white-text">{{info.card_id}}</text>
			</view>
			<view class="senior-list">
				<text>{{i18n.auth.position}}</text>
				<text class="white-text">{{info.position}}</text>
			</view>
			<!-- 图片上传 -->
			<view class="upload-box">
				<u-upload :action="action" @on-remove="removeHandle1" @on-success="successHandle1" max-count="1" :custom-btn="true" width="500" height="314">
					<image v-if="info.front_pic" slot="addBtn" class="slot-btn"  :src="info.front_pic" mode="widthFix"></image>
					<view slot="addBtn" class="slot-btn" v-else>
						<view>
							<u-icon name="camera-fill" size="80" color="#fff"></u-icon>
							<text class="white-text">{{i18n.auth.idAvatar}}</text>
						</view>
						<image class="image" src="../../static/images/ui/id_zheng.png" mode="widthFix"></image>
					</view>
				</u-upload>
				<u-upload :action="action" @on-remove="removeHandle2" @on-success="successHandle2" max-count="1" :custom-btn="true" width="500" height="314">
					<image v-if="info.reverse_pic" slot="addBtn" class="slot-btn"  :src="info.reverse_pic" mode="widthFix"></image>
					<view slot="addBtn" class="slot-btn" v-else>
						<view>
							<u-icon name="camera-fill" size="80" color="#fff"></u-icon>
							<text class="white-text">{{i18n.auth.idAvatar}}</text>
						</view>
						<image class="image" src="../../static/images/ui/id_fan.png" mode="widthFix"></image>
					</view>
				</u-upload>
				<u-upload :action="action" @on-remove="removeHandle3" @on-success="successHandle3" max-count="1" :custom-btn="true" width="500" height="314">
					<image v-if="info.hand_pic" slot="addBtn" class="slot-btn"  :src="info.hand_pic" mode="widthFix"></image>
					<view slot="addBtn" class="slot-btn" v-else>
						<view>
							<u-icon name="camera-fill" size="80" color="#fff"></u-icon>
							<text class="white-text">{{i18n.auth.handleIdAvatar}}</text>
						</view>
						<image class="image photo" src="../../static/images/ui/photo.png" mode="widthFix"></image>
					</view>
				</u-upload>
			</view>
			<custom-submit :loading="loading" @click="submit" :title="i18n.common.submit" :marginTop="60"></custom-submit>
		</view>
	</view>
</template>

<script>
	import minix from '@/utils/minix.js'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import { userHighreal_info, userHighreal_name} from '@/api/index.js'
	import { mapGetters } from 'vuex'
	import { Toast } from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			CustomSubmit
		},
		data() {
			return {
				info: {},
				loading: false,
				action: 'http://13860.shikecm.com/api/upload'
			}
		},
		computed: {
			...mapGetters(['token', 'review_status']),
			i18n() {
				return this.$t('message');
			},
		},
		mounted() {
			if (!this.review_status) return Toast(this.i18n.common.primaryAuth);
			this.loadInfo();
		},
		methods: {
			async loadInfo() {
				let { error, res} = await userHighreal_info({token: this.token});
				if (error) return;
				this.info = res;
			},
			successHandle1(data) {
				if (data.type !== 'ok') return Toast(data.message);
				this.info.front_pic = data.message;
			},
			removeHandle1(index, lists, name) {
				if (!lists.length) return this.info.front_pic = '';
			},
			successHandle2(data) {
				if (data.type !== 'ok') return Toast(data.message);
				this.info.reverse_pic = data.message;
			},
			removeHandle2(index, lists, name) {
				if (!lists.length) return this.info.reverse_pic = '';
			},
			successHandle3(data) {
				if (data.type !== 'ok') return Toast(data.message);
				this.info.hand_pic = data.message;
			},
			removeHandle3(index, lists, name) {
				if (!lists.length) return this.info.hand_pic = '';
			},
			async submit() {
				if (!this.info.front_pic || !this.info.reverse_pic) return Toast(this.i18n.auth.idAvatar);
				if (!this.info.hand_pic) return Toast(this.i18n.auth.handleIdAvatar);
				this.info.token = this.token;
				this.loading = true;
				let {error, res} = await userHighreal_name(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.auth.success);
				this.$store.dispatch('user/getInfo');
				this.loading = false;
				this._back();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authentication-senior {
		padding-bottom: 40rpx;
		.container {
			margin-top: 60rpx;
		}
		.senior-list {
			color: rgba(255, 255, 255, .4);

			&>text {
				display: inline-block;

				&:nth-child(2n + 1) {
					width: 150rpx;
					margin-bottom: 30rpx;
				}
			}
		}

		.upload-box {
			width: 500rpx;
			margin: 70rpx auto 0;
		}

		.slot-btn {
			width: 500rpx;
			height: 314rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #262d46;
			border-radius: 16px;
			margin-bottom: 30rpx;
			position: relative;
			& > view {
				text-align: center;
			}
			.white-text {
				display: block;
				font-size: 28rpx;
				margin-top: 30rpx;
			}
			.image {
				width: 332rpx;
				position: absolute;
				top: calc(50% - 113rpx);
				left: calc(50% - 166rpx);
				&.photo {
					width: 194rpx;
					top: calc(50% - 98rpx);
					left: calc(50% - 97rpx);
				}
			}
		}
	}
</style>
